<template>
  <!-- 病理管理 -->
  <div class="main-content-container">
    <div ref="search">
      <el-form label-width="auto">
        <el-row class="moutend" type="flex">
          <!-- <el-c>
        <el-col :span="4">
          <el-button type="primary" @click="handleChange">搜索</el-button>
          <el-button type="text" @click="eliminate">清除</el-button>
        </el-col>ol :span="6">
          <el-input v-model="custQuery" class="inputCss" placeholder="姓名、手机号、会员号" clearable @change="handleChange" />
        </el-c -->
          <el-col :span="14" class="searchs-y">
            <el-form ref="searchs" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                  <el-button slot="append" icon="el-icon-search" @click="handleChange" />
                </el-input>
                <el-form-item v-if="false" class="spn buttons clear-button">
                  <el-button type="primary" @click="eliminate">清除</el-button>
                </el-form-item>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2" :offset="14" class="spn buttons">
            <el-button plain style="margin-top: 15px;" @click="addMedicalBtn('add')">+ 写病历</el-button>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="14">
            <Search :data="yTSDay" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          </el-col>
        </el-row>
        <el-row class="mounteds">
          <Tabs v-model="status" :data="tabsName" @change="searchChange" />
        </el-row>
      </el-form>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="list1" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="no" label="病历编号" :show-overflow-tooltip="true" />
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="projectName" label="所属项目" :show-overflow-tooltip="true" />
        <el-table-column prop="medicalRecordType" label="病历类型" :show-overflow-tooltip="true" />
        <el-table-column prop="createDatetime" label="创建时间" :show-overflow-tooltip="true" />
        <el-table-column prop="creatorName" label="填写人" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="creatorName" label="审核状态" :show-overflow-tooltip="true" /> -->
        <el-table-column prop="reviewerName" label="审核人" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="location" label="存放位置" :show-overflow-tooltip="true" /> -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="seeDetails(true,row.id,row.customerId)">详情</el-button>
            <el-button type="text" @click="addMedicalBtn('edit',row)">修改</el-button>
            <el-button type="text" @click="deleteMedicalBtn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <OrderDetails :visible.sync="visible" :customer-id="customerId" :medical-details-id="MedicalDetailsId" @seeDetails="seeDetails" />
    <AddMedical ref="addMedicalRef" :title="title" :reveal="reveal" :control="false" @success="getList" />
    <!-- <EaditMedical ref="medical" /> -->
  </div>
</template>
<script>
// import { DictionarySelector } from '@rabbit.do/rabbit';
import Search from '@/components/Search';
import { yTSDay } from "@/config";
import OrderDetails from "./medicalDetails.vue";
// import EaditMedical from "./eaditMedical.vue";
import AddMedical from "../../diagnose/curetask/medicalDialog";
import Tabs from "@/components/SearchSelection";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    OrderDetails,
    Tabs,
    AddMedical,
    // EaditMedical,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      customerId: 0,
      loading: false,
      title: '',
      MedicalDetailsId: '',
      custQuery: "",
      yTSDay,
      visible: false,
      reveal: true,
      orderStatus: '全部',
      remedyType: '不限制就诊类型',
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      customerData: {},
      list1: [],
      input3: '',
      search: {
        'orderStatus': '全部',
        'timeType': 'today',
        'createdTime': new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 00:00:00" + '_' + new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " 23:59:59",
      },
      values: 1, // 控制表格是待咨询还是已咨询的
      choice: true,
      status: "全部",
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "未审核", name: "未审核" },
        { id: "通过", name: "通过" },
        { id: "不通过", name: "不通过" },
      ],
    };
  },
  created() {
    if (this.$route.query.isPopup) {
      this.$router.push({
        query: {},
      });
    }
  },
  mounted() {
    this.getList();
    this.attributionConsultant();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    searchChange(e) {
      // Tabs切换的方法函数
      Object.assign(this.search, { status: e === "全部" ? "" : e });
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      console.log(this.queryParams.page);
      this.getList();
    },
    async attributionConsultant() { // 获取咨询师下拉框的数据
      const res = await this.$api['data/hospitalStaff/getAllByJobName']({ hospitalJobName: "咨询师" });
      if (res.code !== 200) return;
      this.options = res.data;
    },
    seeDetails(bool, id, customerId) { // 点击查看
      if (id) {
        this.MedicalDetailsId = id;
        this.customerId = customerId;
        console.log(this.customerId, bool, "676676");
      }
      if (!bool) {
        this.MedicalDetailsId = "";
        // console.log(this.MedicalDetailsId, bool, "676676");
      }
      this.visible = bool;
    },
    clearNoNum(obj) {
      console.log(obj, "ifhdiuf");
      this.input3 = this.input3.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.input3 = this.input3.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.input3 = this.input3.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.input3 = this.input3.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      this.input3 = this.input3.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');// 只能输入两个小数
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    getList() { // 请求列表的数据
      this.$api['department/diagnose/departmentorder/getMedicalList']({ ...this.queryParams, query: this.search }).then(res => {
        if (res.code !== 200) return this.$message.error("查询病历管理列表失败");
        this.list1 = res.data.result;
        this.total = res.data.total;
        console.log(res, "this.$massage.error()");
        // this.$message.error("查询病历管理列表成功")
      });
    },
    handlePaginationChange(pagination) { // 分页
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    // 写病例
    addMedicalBtn(type, row) {
      if (type === 'add') {
        this.title = "写病历";
      } else {
        this.title = "修改病历";
      }
      this.reveal = false;
      this.$refs.addMedicalRef.medicalBtn(row);
    },
    // 删除病例
    async deleteMedicalBtn(id) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      const res = await this.$api['department/consumables/deletemedicalrecord']({ id: id });
      if (res.code !== 200) return this.$message.error('删除病历失败！');
      this.$message.success('删除病历成功！');
      this.getList();
    },
    eliminate() { // 点击顶部搜索处的清除文字
      this.search = {};
      this.custQuery = "";
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  color: #707070;
}
// .el-table {
//   margin: 0 0 60px;
// }
.el-button {
  color: rgb(114, 222, 236);
}
.top {
  .moutend{
    margin-bottom: 10px;
  }
}
.mounteds {
  margin: 10px 0;
}
</style>
